<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  <style>
    .box {
      width: 322px;
      position: fixed;
      bottom: 0;
      right: 0;
      overflow: hidden;
    }
    
    span {
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 20px;
      cursor: pointer;
    }
  </style>

</head>
<body>

<div class="box" id="box">
  <span id="closeButton"></span>
  <div class="hd" id="headPart">
    <img src="images/t.jpg" alt=""/>
  </div>
  <div class="bd" id="bottomPart">
    <img src="images/b.jpg" alt=""/>
  </div>
</div>

</body>
</html>

<script src="jq/jquery-1.12.2.js"></script>
<script>

  /**
   * 先让底部消失，然后让整个盒子消失
   */

  $(function () {
    //找到关闭按钮并且注册鼠标点击事件
    $("#closeButton").click(function () {
      //找到底部的盒子，把这个盒子的高度变为0
      $("#bottomPart").animate({height: 0}, 800, function () {
        //找到整个大盒子并且把这个大盒子的宽度变为0
        $("#box").animate({width: 0}, 1000);
      });
    });
  });

</script>